<template>
    <base-page bgColor='#FFFFFF'>
        <view slot="header">
            <cu-custom :isBack="true" bgColor="bg-white">
                <block slot="content">账号管理</block>
            </cu-custom>
        </view>
        <view slot="center" class="auto-100 main-wrapper">
            <view class="info-list " v-if="showSetphone!=true">
                <view class="info-item df-cen-rl" v-for="(item, index) in foList" :key="index">
                    <view class="info-name">{{ item.name }}</view>

                    <view style="display:flex">
                        <view class="info-name psf" v-if="userInfo.mobile">{{userInfo.mobile}}</view>
                        <view class="info-name psf" style="color:#004EFF;" @click="showbpbtn" v-else>绑定手机号</view>
                        <image class="icon" src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/rightarrow.png" mode="" />
                    </view>
                </view>
                <!-- <view class="info-name psf" v-if="userInfo.mobile">{{userInfo.mobile}}</view> -->
                <!-- <view class="info-name psf" style="color:#004EFF;" @click="showbpbtn" v-else>绑定手机号</view>
				<view class="info-name psftwo" v-if="userInfo.nickname">{{userInfo.nickname}}</view>
				<view class="info-name psftwo" style="color:#004EFF;" @click="showbwxbtn" v-else>绑定微信号</view> -->
            </view>

            <bindPhone :show="show" @show="childClickTwo"></bindPhone>
            <bindwx :showBdwx="showBdwx" @showBdwx="childClick"></bindwx>
            <setphone :showSetphone='showSetphone' @showSetphone="childClickThree"></setphone>

        </view>
    </base-page>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
export default {
    data() {
        return {
            foList: [{
                name: '手机绑定',
                auth: true
            },
                // {
                // 	name: '微信绑定',
                // 	auth: true
                // }
            ],
            show: false,
            showBdwx: false,
            showSetphone: false,
            userInfo:{}
        };
    },
    computed: {
        // #ifdef H5
        ...mapGetters(['env']),
        // #endif
        // #ifdef MP-WEIXIN
        ...mapGetters(['userInfo']),
        // #endif
    },
    onLoad(e) {

        this.userInfo =   uni.getStorageSync('userInfo');
        console.log("this.userInfo", this.userInfo)
     },
    onShow(e) {
       
    },
    methods: {
        showbpbtn() {
            // #ifdef H5
            this.showSetphone = true
            // #endif

            // #ifdef MP-WEIXIN
            this.show = true
            // #endif
        },
        showbwxbtn() {
            this.showBdwx = true
        },
        childClick(showBdwx) {
            if (showBdwx == true) {
                this.showBdwx = false
                uni.navigateBack({
                    delta: 1
                });
            } else {
                this.showBdwx = true
            }
        },
        childClickTwo(show) {
            if (show == true) {
                this.show = false
                uni.navigateBack({
                    delta: 1
                });
            } else {
                this.show = true
            }
        },
        childClickThree(showSetphone) {
            if (showSetphone == true) {
                this.showSetphone = false
                uni.navigateBack({
                    delta: 1
                });
            } else {
                this.showSetphone = true
            }
        }
    },
    mounted() { }
};
</script>

<style lang="scss">
.main-wrapper {
    background-color: #f4f4f4;
}

.logout {
    background-color: #fff;
    padding: 15px 0;
    font-size: 14px;
    text-align: center;
}

.info-list {
    position: relative;
    background-color: #fff;
    padding: 0 15px;
    border-bottom: 5px solid #f4f4f4;

    .info-item {
        position: relative;
        border-bottom: 1px solid #f4f4f4;
        padding: 15px 0;

        .info-name {
            flex: 1;
            font-size: 14px;
        }

        .icon {
            width: 16px;
            height: 16px;

            image {
                width: 100%;
                height: 100%;
            }
        }

        &:nth-last-child(1) {
            border-bottom: 0px solid #f4f4f4;
        }
    }
}
.psf {
    // width: 200rpx;
    // position: absolute;
    // top: 25%;
    // left: 80%;
    // transform: translate(-50%,-50%);
}
.psftwo {
    width: 200rpx;
    position: absolute;
    top: 75%;
    left: 80%;
    transform: translate(-50%, -50%);
}
</style>
